<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=0.5,maxinum-scale=0.5, mininum-scale=0.5,user-scalable=no"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maxinum-scale=1.0, mininum-scale=1.0,user-scalable=no">
 

    <!-- <meta name="viewport" content="initial-scale=0.3"> -->
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <script src="libs/rem.js"></script>
    <script src="libs/border1px.js" ></script>

   <style>
       ul {
           width:7.5rem;
           height:auto;
           padding:0;
           margin:0;
       }

       li {
         width:7.5rem;
         height:2rem;
         border-radius: 0.12rem;
         background-color:pink;
         margin-bottom:0.12rem;
       }


   </style>
</head>
<body>
<ul>

</ul>
<script src="libs/zepto.js"></script>
<script>
    var data = [{
        item: 1,
    },{
        item: 2,
    },{
        item: 3,
    },{
        item: 4,
    },{
        item: 5,
    },{
        item: 6,
    },{
        item: 7,
    },{
        item: 8,
    },{
        item: 9,
    },{
        item: 10,
    }];

    function getData() {
        var html = '';
        for(var i= 0; i<data.length;i++) {
            html += '<li>'+data[i].item+'</li>';
        }

        $("ul").append(html);
        
    }

    

    getData();

    window.onscroll = function (e) {
        // console.log($(window).scrollTop(), '<--$("ul").scrollTop()');
        // console.log($(document).scrollTop(), '<--$(document).scrollTop()');
        // console.log($(window).height(), '<--$(window).height()');

        // console.log($(document).scroll(), '$(document).scrollTop()');
        // console.log($(window).scrollTop() + $(window).height(), '<--1');
        // console.log($(document).height(), '<--2');
        
        if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
            console.log('滚动到了底部');
            getData();
        }
    };
</script>
</body>
</html>